<template>
    <div class="home">
        <div class="banner">
            <img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/lg128.png">
            <h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
        </div>

        <br />

        <h2># Trend 组件 </h2>

        <a-divider> 正常 </a-divider>

        <a-card>

            <trend flag="up" style="margin-right: 16px;">
                <span slot="term">工资</span>
                5%
            </trend>
            <trend flag="up" style="margin-right: 16px;">
                <span slot="term">工作量</span>
                50%
            </trend>
            <trend flag="down">
                <span slot="term">身体状态</span>
                50%
            </trend>

        </a-card>

        <a-divider> 颜色反转 </a-divider>

        <a-card style="margin-bottom: 3rem">

            <trend flag="up" :reverse-color="true" style="margin-right: 16px;">
                <span slot="term">工资</span>
                5%
            </trend>
            <trend flag="down" :reverse-color="true" style="margin-right: 16px;">
                <span slot="term">工作量</span>
                50%
            </trend>

        </a-card>

        <h2># AvatarList 组件 </h2>

        <a-divider> AvatarList </a-divider>
        <a-card style="margin-bottom: 3rem">
            <avatar-list :max-length="3">
                <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
                <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
                <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
                <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
                <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
                <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
                <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />

            </avatar-list>

            <a-divider type="vertical" style="margin: 0 16px" />

            <avatar-list size="mini">
                <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
                <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
                <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
            </avatar-list>
        </a-card>

        <h2># CountDown 组件 </h2>

        <a-divider> CountDown </a-divider>
        <a-card style="margin-bottom: 3rem">
            <count-down style="font-size: 2rem" :target="new Date().getTime() + 3000000" :on-end="onEndHandle">
            </count-down>

            <a-divider type="vertical" style="margin: 0 16px" />

            <count-down style="font-size: 2rem" :target="new Date().getTime() + 10000" :on-end="onEndHandle2">
            </count-down>
        </a-card>

        <h2># Ellipsis 组件 </h2>

        <a-divider> Ellipsis </a-divider>
        <a-card style="margin-bottom: 3rem">
            <ellipsis :length="100" tooltip>
                There were injuries alleged in three cases in 2015, and a
                fourth incident in September, according to the safety recall report. After meeting with US regulators in
                October,
                the firm decided to issue a voluntary recall.
            </ellipsis>
        </a-card>

        <h2># NumberInfo 组件 </h2>

        <a-divider> NumberInfo </a-divider>
        <a-card>
            <number-info :sub-title="() => { return 'Visits this week' }" :total="12321" status="up"
                :sub-total="17.1"></number-info>
        </a-card>
    </div>
</template>

<script>
// @ is an alias to /src

import Trend from '@/components/Trend'
import AvatarList from '@/components/AvatarList'
import CountDown from '@/components/CountDown/CountDown'
import Ellipsis from '@/components/Ellipsis'
import NumberInfo from '@/components/NumberInfo'

const AvatarListItem = AvatarList.AvatarItem

export default {
    name: 'Home',
    components: {
        NumberInfo,
        Ellipsis,
        CountDown,
        Trend,
        AvatarList,
        AvatarListItem
    },
    data() {
        return {
            targetTime: new Date().getTime() + 3900000
        }
    },
    methods: {
        onEndHandle() {
            this.$message.success('CountDown callback!!!')
        },
        onEndHandle2() {
            this.$notification.open({
                message: 'Notification Title',
                description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
            });
        }
    }
}
</script>

<style scoped>
.home {
    width: 900px;
    margin: 0 auto;
    padding: 25px 0;
}

.home>.banner {
    text-align: center;
    padding: 25px 0;
    margin: 25px 0;
}
</style>
